<script setup>
import { onMounted, ref } from 'vue'
import { queryAllCourseComment } from '@/api/course_comment'
import { ElMessage } from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(2)
const background = ref(true);
const total = ref(0);
const tableData = ref([])
const form = ref({username:''})

onMounted(() => {
  search()
})
const search=async ()=>{
  const restult = await queryAllCourseComment(form.value.username,currentPage.value,pageSize.value)
  console.log(restult)
  if(restult.code){
    tableData.value = restult.data.rows;
    total.value = restult.data.total
  }else{
    ElMessage.error(restult.msg)
  }
}
const handleDelete=async (id)=>{
    ElMessageBox.confirm('您确认删除该课程分类信息吗?','提示',
    { confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
  ).then(async () => {
    const result = await deleteCourseComment(id)
    if(result.code){
      ElMessage.success("删除成功")
      search() 
    } else{
      ElMessage.error("删除失败") 
    }
  }).then(() => {
    ElMessage.info('已取消删除')
  })  
}
const handleSizeChange = (val) => {
  search()
}
const handleCurrentChange = (val) => {
 search()
}
</script>

<template>
    <h3>课程评价页面</h3>
    <div class="container">
        <el-form :model="form" label-width="auto" style="max-width: 300px">
          <el-form-item label="评价用户">
          <el-input v-model="form.username" clearable @clear="clear" placeholder="请输入评价用户名" />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="search">查询</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%"  >
        <el-table-column type="selection" width="55" />
        <el-table-column label="id" property="id" width="50" />
        <el-table-column label="评论内容" property="comment" width="180"  show-overflow-tooltip />
        <el-table-column label="评论课程" property="title" width="80" />
        <el-table-column label="评价星级" property="ratting" width="160" align="center">
          <template #default="scope">
            <el-rate
                v-model="scope.row.ratting"
                disabled
                text-color="#ff9900"
            />
          </template>
        </el-table-column>
        <el-table-column label="评价时间" property="time" width="120" />
        <el-table-column  label="评价用户" property="username" width="240" />
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button type="info" size="mini" @click="handleDetails(scope.row.id)" >详情</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)" >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination 
    v-model:current-page="currentPage" 
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40]" 
    :size="size" :disabled="disabled" 
    :background="background"
    layout="total, sizes, prev, pager, next, jumper" 
    :total="total" 
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>
<style scoped>
.container {
  display: flex;
  flex-direction: flex-start;
  gap: 10px;
}
</style>